<template>
  <scroll-view class="account-info" :style="{ height: screenHeight }">
    <div class="wrap">
      <div class="info-block">
        <div class="te">
          <div class="button" @click="toUserInfo">{{ userInfo.name }} &#62;</div>
        </div>
        <div class="te">积分 Redeem Points {{ userInfo.integral }}</div>
        <div class="te">
          <div class="button" @click="toMessage">
            <div class="span">我的消息 My Messages</div>
            <div class="red" v-if="hadUnread"></div>
            <div class="span">></div>
          </div>
        </div>
      </div>
      <div class="vip-box">
        <div class="not-vip" v-if="!isVip">
          <div class="not-text" @click="toVipInfo">
            <div class="span">立即订阅会员，享受更多优惠。</div>
            <div class="span">Subscribe to our membership for special offers.</div>
          </div>

          <div class="not-img">
            <img class="img" src="@/static/icon/not-vip.png" mode="aspectFill" alt="" />
          </div>
        </div>
        <div class="not-vip" v-else>
          <div class="not-text">
            <div class="span">会员二维码</div>
            <div class="span">Membership QR code</div>
          </div>

          <div class="vip-img">
            <!-- <img class="img" src="@/static/icon/code.svg" mode="aspectFill" alt="" /> -->
            <uv-qrcode ref="qrcode" size="300px" auto :value="codeValue"></uv-qrcode>
          </div>
          <div class="not-text">
            <!-- &#62; 是 > 右箭头代码 -->
            <div class="span">会员详情 Membership Information &#62;</div>
          </div>
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  onUnmounted,
  watch,
  computed,
  defineExpose,
  defineProps
} from 'vue'
import { useStore } from 'vuex'
import { onShow, onLoad, onHide } from '@dcloudio/uni-app'
import { messageUnreadCount } from '@/utils/api/message'
import { getQrCode } from '@/utils/api/user'
const store = useStore()

const screenHeight = ref<number>(0)
const statusBarHeight = computed(() => store.getters['system/statusBarHeight'])
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])
screenHeight.value = `calc(100vh - ${statusBarHeight.value}px - ${bottomSafeArea.value}px - 90rpx - 116rpx - 126rpx)`
const userInfo = computed(() => store.state.user.userInfo)

const props = defineProps({
  pageCurrent: {
    type: Number,
    default: 0
  }
})
// const qrcode = ref()

import { encryptDes } from '@/utils/encryption'
let isVip = computed(() => {
  return store.getters['user/isVip']
})

let userCode: number | string = ''
const toVipInfo = () => {
  uni.navigateTo({
    url: '/pages/vipInfo/vipInfo'
  })
}

let hadUnread = ref<boolean>(false)
const getUnReadCount = async () => {
  const { code, data } = await messageUnreadCount()
  if (code === 200) {
    hadUnread.value = data > 0
  }
}

const toMessage = () => {
  uni.navigateTo({
    url: '/pages/message/message'
  })
}
const toUserInfo = () => {
  uni.navigateTo({
    url: '/pages/userInfo/userInfo'
  })
}

let codeValue = ref<string>('12323232323232')
const createCode = () => {
  let id = store.state.user.userInfo.id.toString()
  let clientUser = `clientUser^${encryptDes(id)}`
  let code = encryptDes(userCode)
  console.log('clientUser', clientUser)
  console.log('code', code)
  codeValue.value = `clientUser^${encryptDes(id)}^code^${encryptDes(userCode)}`
  console.log('codeValue', codeValue.value)
}
let timeCode = ref<any>(null)
const haveCode = async () => {
  console.log(props.pageCurrent, timeCode.value)
  if (uni.getStorageSync('currentTopTab') === 0) {
    const { code, data } = await getQrCode()
    if (code !== 200) return
    userCode = data
    createCode()
  } else {
    clearInterval(timeCode.value)
    timeCode.value = null
  }
}

const initData = () => {
  store.dispatch('user/getUserInfo')
  // 获取未读消息数量
  getUnReadCount()
  haveCode()
  if (!timeCode.value) {
    timeCode.value = setInterval(() => {
      haveCode()
    }, 5000)
  }
}
const closeCode = () => {
  console.log('关闭code')
  clearInterval(timeCode.value)
  timeCode.value = null
  console.log('清除的计时器', timeCode.value)
}

defineExpose({
  initData,
  closeCode
})
onUnmounted(() => {
  closeCode()
})
// onShow(() => {
//   getInfo()
// })
</script>

<style lang="scss" scoped>
@import './accountInfo.scss';
</style>
